<!--
 * @Author: your name
 * @Date: 2020-08-15 11:29:26
 * @LastEditTime: 2020-08-15 14:58:27
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cartoon\components\BottomRecommend.vue
-->
<template>
  <div class="bottom-recommend">
    <div class="bottom-recommend-img">
      <ImgAspect
        class="img"
        :lazy="true"
        :radius="4"
        :width="95"
        :height="126"
        :src="detail.img"
      />
    </div>
    <div class="bottom-recommend-content">
      <div class="top-desc">
        <div class="desc-name">
          <p>{{ detail.title ? detail.title :'' }}</p>
          <p>{{ detail.author ? detail.author :'' }}</p>
        </div>
        <div class="read-now">
          <div class="icon icon-hl2"></div>
          <p>阅读</p>
        </div>
      </div>
      <div class="detail-desc">
        <p>{{ detail.desc ? detail.desc : '' }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import defaultImage from '../static/images/mascot-dance.gif'
import ImgAspect from '~/components/ImgAspect'
export default {
  components: {
    ImgAspect
  },
  props: {
    // eslint-disable-next-line vue/require-prop-types
    detail: {
      required: true,
      default: () => {
        return {
          author: '',
          desc: '',
          href: 1,
          img: '',
          section: '',
          title: ''
        }
      }
    }
  },
  data () {
    return {
      defaultImage
    }
  }
}
</script>
<style lang="scss" scoped>
    .bottom-recommend {
        margin: 20px 0px;
        display: flex;
        .bottom-recommend-img {
            width: 95px;
            margin-right: 14px;
        }
        .bottom-recommend-content {
            flex: 1;
            .top-desc {
                display: flex;
                margin-bottom: 10px;
                .desc-name {
                  flex: 1;
                  display: flex;
                  flex-direction: column;
                  justify-content: space-between;
                  border-right: 1px dashed #9a9999;
                  p {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    -webkit-box-orient: vertical;
                    color: #ccc;
                    font-size: 12px;
                  }
                  P:nth-of-type(1) {
                    color: #fff;
                    font-size: 16px;
                  }
                }
            }
            .detail-desc {
              p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                color: #a9a4a4;
              }
            }
            .read-now {
                display: flex;
                flex-direction: column;
                justify-content: center;
                box-sizing: border-box;
                padding-top: 4px;
                padding-left: 10px;
                >div {
                  background-size: 135px 132px;
                  width: 24px; height: 24px; background-position: -110px -70px;
                }
                p {
                  text-align: center;
                  margin-top: 4px;
                }
                color: #fff;
                font-size: 13px;
            }

        }
    }
</style>
